<template>
  <div id="body">
    <div id="saizhi"> 
      <div class="htitle">
        <strong>球队能力分析</strong>
        
      </div>
    </div>
    <div id="teamrank">
    <el-select v-model="leagueId" clearable placeholder="请选择联赛" style="width: 200px;margin-right: 10px;">
        <el-option v-for="item in leagueoptions" :key="item.id" :label="item.leagueName" :value="item.id">
            {{ item.leagueName }}
        </el-option>
    </el-select>

    <strong style="display:inline-block;margin-right: 10px;font-size: 12px;">球队排行:</strong>
      <el-select  v-model="teamAbilityId" clearable placeholder="请选择球队排行" style="width: 150px;margin-right: 10px;">
        <el-option v-for="item in teamAbilityoptions" :key="item.id" :label="item.value" :value="item.id">
          {{ item.value }}
        </el-option>
      </el-select>
    <el-button class="ml-5" icon="el-icon-search" circle @click="loadteamRank">查询排行</el-button>
    <el-button icon="el-icon-remove" circle @click="resetteamRank">重置查询</el-button> 
    </div>


    <div id="exhibitor117">
      <div id="exhibitor117left" ref="chart">
          </div>

          <div id="exhibitor117right" >
            <div style="font-size:40px;color:red;text-align: center;">The Best</div>
            <div style="font-size:30px;color:black;text-align: center;">
              <div v-if="teamAbilitylist[teamAbilitylist.length-1]">TOP1:{{ teamAbilitylist[teamAbilitylist.length-1].team.teamName }}</div>
              <div v-if="teamAbilitylist[teamAbilitylist.length-1]">
                <img :src="teamAbilitylist[teamAbilitylist.length-1].team.teamImg"  width="100" height="100">
              </div>
              
              <div v-if="teamAbilitylist[teamAbilitylist.length-2]">TOP2:{{ teamAbilitylist[teamAbilitylist.length-2].team.teamName }}</div>
              <div v-if="teamAbilitylist[teamAbilitylist.length-1]">
                <img :src="teamAbilitylist[teamAbilitylist.length-2].team.teamImg" width="100" height="100">
              </div>
              <div v-if="teamAbilitylist[teamAbilitylist.length-3]">TOP3:{{ teamAbilitylist[teamAbilitylist.length-3].team.teamName }}</div>
              <div v-if="teamAbilitylist[teamAbilitylist.length-1]">
                <img :src="teamAbilitylist[teamAbilitylist.length-3].team.teamImg" width="100" height="100">
              </div>
            </div>
            <div style="font-size:40px;color:red;text-align: center;">The Worst</div>
            <div style="font-size:30px;color:black;text-align: center;">
              <div v-if="teamAbilitylist[0]">TOP1:{{ teamAbilitylist[0].team.teamName }}</div>
              <div v-if="teamAbilitylist[teamAbilitylist.length-1]">
                <img :src="teamAbilitylist[0].team.teamImg" width="100" height="100">
              </div>
              <div v-if="teamAbilitylist[1]">TOP2:{{ teamAbilitylist[1].team.teamName }}</div>
              <div v-if="teamAbilitylist[teamAbilitylist.length-1]">
                <img :src="teamAbilitylist[1].team.teamImg" width="100" height="100">
              </div>
              <div v-if="teamAbilitylist[2]">TOP3:{{ teamAbilitylist[2].team.teamName }}</div>
              <div v-if="teamAbilitylist[teamAbilitylist.length-1]">
                <img :src="teamAbilitylist[2].team.teamImg" width="100" height="100">
              </div>
            </div>
          </div>
    </div>
    <div id="saizhi"> 
      <div class="htitle">
        <strong>球员能力分析</strong>
        
      </div>
    </div>
    <div id="playerrank">

    <el-select v-model="league1Id" clearable placeholder="请选择联赛" style="width: 200px;margin-right: 10px;" @change="changeLeague()">
        <el-option v-for="item in league1options" :key="item.id" :label="item.leagueName" :value="item.id">
            {{ item.leagueName }}
        </el-option>
    </el-select>
    <el-select v-model="teamId" clearable placeholder="请选择球队" style="width: 200px;margin-right: 10px;" >
        <el-option v-for="item in teamoptions" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName }}
        </el-option>
    </el-select>
    
    <strong style="display:inline-block;margin-right: 10px;font-size: 12px;">球员排行:</strong>
    <el-select  v-model="playerAbilityId" clearable placeholder="请选择球员排行" style="width: 150px;margin-right: 10px;">
      <el-option v-for="item in playerAbilityoptions" :key="item.id" :label="item.value" :value="item.id">
         {{ item.value }}
      </el-option>
    </el-select>  

    <el-button class="ml-5" icon="el-icon-search" circle @click="loadplayerRank">查询排行</el-button>
    <el-button icon="el-icon-remove" circle @click="resetplayerRank">重置查询</el-button> 
    </div>

      <div id="exhibitor118">
        <div id="exhibitor118left" ref="chart1">
          </div>

          <div id="exhibitor118right">
            <div style="font-size:30px;color:red;text-align: center;">The Best</div>
            <div style="font-size:30px;color:black;text-align: center;">
              <div v-if="playerAbilitylist[playerAbilitylist.length-1]">TOP1:{{ playerAbilitylist[playerAbilitylist.length-1].player.playerName }}</div>
              <div v-if="playerAbilitylist[playerAbilitylist.length-1]">
                <img :src="playerAbilitylist[playerAbilitylist.length-1].player.playerImg"  width="100" height="100">
              </div>
              <div v-if="playerAbilitylist[playerAbilitylist.length-2]">TOP2:{{ playerAbilitylist[playerAbilitylist.length-2].player.playerName }}</div>
              <div v-if="playerAbilitylist[playerAbilitylist.length-2]">
                <img :src="playerAbilitylist[playerAbilitylist.length-2].player.playerImg"  width="100" height="100">
              </div>
              <div v-if="playerAbilitylist[playerAbilitylist.length-3]">TOP3:{{ playerAbilitylist[playerAbilitylist.length-3].player.playerName }}</div>
              <div v-if="playerAbilitylist[playerAbilitylist.length-3]">
                <img :src="playerAbilitylist[playerAbilitylist.length-3].player.playerImg"  width="100" height="100">
              </div>
            </div>
            <div style="font-size:30px;color:red;text-align: center;">The Worst</div>
            <div style="font-size:30px;color:black;text-align: center;">
              <div v-if="playerAbilitylist[0]">TOP1:{{ playerAbilitylist[0].player.playerName }}</div>
              <div v-if="playerAbilitylist[0]">
                <img :src="playerAbilitylist[0].player.playerImg"  width="100" height="100">
              </div>
              <div v-if="playerAbilitylist[1]">TOP2:{{ playerAbilitylist[1].player.playerName }}</div>
              <div v-if="playerAbilitylist[1]">
                <img :src="playerAbilitylist[1].player.playerImg"  width="100" height="100">
              </div>
              <div v-if="playerAbilitylist[2]">TOP3:{{ playerAbilitylist[2].player.playerName }}</div>
              <div v-if="playerAbilitylist[2]">
                <img :src="playerAbilitylist[2].player.playerImg"  width="100" height="100">
              </div>
            </div>
          </div>
      </div>




    <div id="saizhi"> 
      <div class="htitle">
        <strong>球队比较分析</strong>
        
      </div>
    </div>
    <el-select v-model="homeAway" clearable placeholder="主客场" style="width: 100px;margin-right: 10px;">
        <el-option value="全部">全部</el-option>
        <el-option value="主场">主场</el-option>
        <el-option value="客场">客场</el-option>
    </el-select>
    <el-select v-model="league2Id" clearable placeholder="请选择联赛" style="width: 200px;margin-right: 10px;" @change="changeLeague1()">
        <el-option v-for="item in league2options" :key="item.id" :label="item.leagueName" :value="item.id">
            {{ item.leagueName }}
        </el-option>
    </el-select>
    <el-select v-model="team1Id" clearable placeholder="请选择球队1" style="width: 200px;margin-right: 10px;" >
        <el-option v-for="item in team1options" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName }}
        </el-option>
    </el-select>
    <div style="display:inline-block">
      <strong> VS </strong>
    </div>
    <el-select v-model="team2Id" clearable placeholder="请选择球队2" style="width: 200px;margin-right: 10px;" >
        <el-option v-for="item in team2options" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName }}
        </el-option>
    </el-select>

    <el-button class="ml-5" icon="el-icon-search"  @click="compareteam">总体比较</el-button>
    <el-button class="ml-5" icon="el-icon-search"  @click="compareaverageteam">场均比较</el-button>
    <el-button icon="el-icon-remove"  @click="resetcompareteam">重置</el-button> 

    

    <div id="exhibitor1" style="float:inherit;position:relative" > 
        <div id="exhibitor1left" >
          <div style="position:absolute;left: 50%;margin-left: -200px; top: 50%;margin-top: 40px; ">
          <a class="testA" @click="TeamDetail(team1info.team.id)" v-if="team1info.team" >
          {{team1info.team.teamName}}
          </a>
          </div>
          <div v-if="team1info.team" @click="TeamDetail(team1info.team.id)"  style="float:right;margin-top: 0px;margin-right: 0px;">
             <img :src="team1info.team.teamImg" width="100" height="100">
               </div>
          <div v-else></div>  
        </div>

        <div id="exhibitor1right" >
          <div v-if="team2info.team" @click="TeamDetail(team2info.team.id)">
             <img :src="team2info.team.teamImg" width="100" height="100">
               </div>
          <div v-else></div>

          <div style="position:absolute;left: 50%;margin-left: 110px; top: 50%;margin-top: 40px; ">
          <a class="testA" @click="TeamDetail(team2info.team.id)" v-if="team2info.team">
            {{team2info.team.teamName}}
          </a>
          </div>  
        </div> 
      </div> 

      <div ref="chart2" id="exhibitor115">
      </div>

      <div ref="chart2p" id="exhibitor115p">
      </div>

    <div id="saizhi"> 
      <div class="htitle">
        <strong>球员比较分析</strong>
        
      </div>
    </div>


    <el-select v-model="league3Id" clearable placeholder="请选择联赛" style="width: 200px;margin-right: 10px;" @change="changeLeague2()">
        <el-option v-for="item in league3options" :key="item.id" :label="item.leagueName" :value="item.id">
            {{ item.leagueName }}
        </el-option>
    </el-select>
    <div>
      </div>
    <el-select v-model="team3Id" clearable placeholder="请选择球队1" style="width: 200px;margin-right: 10px;" @change="changeteam1()">
        <el-option v-for="item in team3options" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName }}
        </el-option>
    </el-select>

    <el-select  v-model="player1Id"  clearable placeholder="请选择球员1" style="width: 150px;margin-right: 10px;" @change="changeteam2()"> 
        <el-option v-for="item in player1options" :key="item.id" :label="item.playerName" :value="item.id">
          {{ item.playerName }}
        </el-option>
      </el-select>

    <div style="display:inline-block">
      <strong> VS </strong>
    </div>

    <el-select v-model="team4Id" clearable placeholder="请选择球队2" style="width: 200px;margin-right: 10px;" >
        <el-option v-for="item in team4options" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName }}
        </el-option>
    </el-select>


    <el-select  v-model="player2Id"  clearable placeholder="请选择球员2" style="width: 150px;margin-right: 10px;">
        <el-option v-for="item in player2options" :key="item.id" :label="item.playerName" :value="item.id">
          {{ item.playerName }}
        </el-option>
      </el-select>
    <el-button class="ml-5" icon="el-icon-search"  @click="compareplayer">总体比较</el-button>
    <el-button class="ml-5" icon="el-icon-search"  @click="compareaverageplayer">场均比较</el-button>
    <el-button icon="el-icon-remove"  @click="resetcompareplayer">重置</el-button> 


    <div id="exhibitor2" style="float:inherit;position:relative" > 
        <div id="exhibitor2left" >
          <div style="position:absolute;left: 50%;margin-left: -170px; top: 50%;margin-top: 40px; ">
          <a class="testA" @click="PlayerDetail(player1info.player.id)" v-if="player1info.player" >
          {{player1info.player.playerName}}
          </a>
          </div>
          <div v-if="player1info.player" @click="PlayerDetail(player1info.player.id)"  style="float:right;margin-top: 0px;margin-right: 0px;">
             <img :src="player1info.player.playerImg" width="100" height="100">
               </div>
          <div v-else></div>  
        </div>

        <div id="exhibitor2right" >
          <div v-if="player2info.player" @click="PlayerDetail(player2info.player.id)">
             <img :src="player2info.player.playerImg" width="100" height="100">
               </div>
          <div v-else></div>

          <div style="position:absolute;left: 50%;margin-left: 110px; top: 50%;margin-top: 40px; ">
          <a class="testA" @click="PlayerDetail(player2info.player.id)" v-if="player2info.player">
            {{player2info.player.playerName}}
          </a>
          </div>  
        </div> 
      </div> 

      <div ref="chart3" id="exhibitor116">
      </div>
      <div ref="chart3p" id="exhibitor116p">
      </div>
    
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts/lib/component/dataZoom'

export default {
  name:'DataAnalysis',
  data(){
    return{
      homeAway:"",//主客场（球队分析比较时使用）
      leagueId:"",//联赛id
      league1Id:"",//联赛id（球员排行查询用）
      league2Id:"",//联赛id（球队分析比较时使用）
      league3Id:"",//联赛id（球员分析比较时使用）
      leagueoptions:[],//联赛选择项
      league1options:[],//联赛选择项(球员排行查询用)
      league2options:[],//联赛选择项(球队分析比较时查询使用)
      league3options:[],//联赛选择项(球员分析比较时查询使用)
      teamId:"",//球队id
      team1Id:"",//球队1id（球队分析比较时使用）
      team2Id:"",//球队2id（球队分析比较时使用）
      team3Id:"",//球队3id（球员分析比较时使用）
      team4Id:"",//球队4id（球员分析比较时使用）
      teamoptions:[],//球队选择项
      team1options:[],//球队1选择项（球队分析比较时使用）
      team2options:[],//球队2选择项（球队分析比较时使用）
      team3options:[],//球队3选择项（球员分析比较时使用）
      team4options:[],//球队4选择项（球员分析比较时使用）
      player1Id:"",//球员1id(球员分析比较时使用)
      player2Id:"",//球员2id(球员分析比较时使用)
      player1options:[],//球员1选择项
      player2options:[],//球员2选择项

      team1Data:[],//球队1数据
      team2Data:[],//球队2数据
      team1attackData:[],//球队1进攻数据
      team2attackData:[],//球队2进攻数据
      team1passData:[],//球队1传球数据
      team2passData:[],//球队2传球数据
      player1Data:[],//球员1数据
      player2Data:[],//球员2数据
      player1attackData:[],//球员1进攻数据
      player2attackData:[],//球员2进攻数据
      player1passData:[],//球员1传球数据
      player2passData:[],//球员2传球数据
      team1aveData:[],//球队1场均数据
      team2aveData:[],//球队2场均数据
      team1aveattackData:[],//球队1场均进攻数据
      team2aveattackData:[],//球队2场均进攻数据
      team1avepassData:[],//球队1场均传球数据
      team2avepassData:[],//球队2场均传球数据
      player1aveData:[],//球员1场均数据
      player2aveData:[],//球员2场均数据
      player1aveattackData:[],//球员1场均进攻数据
      player2aveattackData:[],//球员2场均进攻数据
      player1avepassData:[],//球员1场均传球数据
      player2avepassData:[],//球员2场均传球数据


      team1info:[],//球队1球队信息
      team2info:[],//球队2球队信息
      player1info:[],//球员1球员信息
      player2info:[],//球员2球员信息
      

      teamAbilityId:"",//球队能力id
      teamAbilityoptions:[//球队能力排行选择项
        {id:"1",value:"综合能力"},
        {id:"2",value:"进攻能力"},
        {id:"3",value:"防守能力"}
      ],
      playerAbilityId:"",//球员能力id
      playerAbilityoptions:[//球员能力排行选择项
        {id:"1",value:"综合能力"},
        {id:"2",value:"进攻能力"},
        {id:"3",value:"防守能力"},
        {id:"4",value:"速度"},
        {id:"5",value:"力量"},
        {id:"6",value:"射门"},
        {id:"7",value:"传球"},
        {id:"8",value:"盘带"},
        {id:"9",value:"技巧"},
        {id:"10",value:"任意球能力"},
        {id:"11",value:"体能"},
        {id:"12",value:"头球能力"},
        {id:"13",value:"弹跳"},
        {id:"14",value:"守门能力"},
        {id:"15",value:"团队合作"},
        {id:"16",value:"身价"}
      ],
      teamAbilitylist:[],
      playerAbilitylist:[],

    }
  },
  computed:{

  },
  created(){
    this.load()
    
  },
  
  mounted(){
    this.loadteamRank()
    this.loadplayerRank()
    
  },
  methods:{
    load(){
      //查询所有联赛信息到选择框中
      this.request.get("/league/findall").then(res=>{
        console.log(res.data)
        this.leagueoptions = res.data
        this.league1options=res.data
        this.league2options=res.data
        this.league3options=res.data
      }),
      //查询所有球队信息到选择框中
      this.request.get("/team/findall").then(res =>{
        console.log(res.data)
        this.teamoptions = res.data
        this.team1options=res.data
        this.team2options=res.data
        this.team3options=res.data
        this.team4options=res.data
      })
      //查询所有球员信息到选择框中
      this.request.get("/player/findall").then(res=>{
        console.log(res.data)
        this.player1options=res.data
        this.player2options=res.data
      })
    },
    //选择联赛时，查询该联赛的轮次和球队
    changeLeague(){
      this.request.get("/league/findTeamByLeagueId/"+this.league1Id).then(res=>{
        if(res.code === '200'){
          this.teamoptions = []
          this.teamoptions = res.data
        }else{
          this.$message.error("查找失败")
        }
      })
    }, 
    changeLeague1(){
      this.request.get("/league/findTeamByLeagueId/"+this.league2Id).then(res=>{
        if(res.code === '200'){
          this.team1options = []
          this.team2options = []
          this.team1options = res.data
          this.team2options = res.data
        }else{
          this.$message.error("查找失败")
        }
      })
    }, 
    changeLeague2(){
      this.request.get("/league/findTeamByLeagueId/"+this.league3Id).then(res=>{
        if(res.code === '200'){
          this.team3options = []
          this.team4options = []
          this.team3options = res.data
          this.team4options = res.data
        }else{
          this.$message.error("查找失败")
        }
      })
    }, 

    changeteam1(){
      this.request.get("/player/getPlayerByTeamId/"+this.team3Id).then(res=>{
        if(res.code === '200'){
          this.player1options = []
          this.player1options = res.data

        }else{
          this.$message.error("查找失败")
        }
      })
    },

    changeteam2(){
      this.request.get("/player/getPlayerByTeamId/"+this.team4Id).then(res=>{
        if(res.code === '200'){
          this.player2options = []
          this.player2options = res.data

        }else{
          this.$message.error("查找失败")
        }
      })
    },
    
    loadteamRank(){
      const seriesLabel = {
      show: true
      };
      var teamoption = {
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      dataZoom: [
        {
            id: 'dataZoomY',
            type: 'slider',
            yAxisIndex: [0],
            filterMode: 'empty'
        }
      ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: []//球队名称
      },
      series: [
        {
          name: '参数',
          type: 'bar',//柱状图
          data: [],//各种能力值
          label: seriesLabel
        },
      ]
    };
     //球队能力排行柱状图
     this.request.get("/rank/front/RankTeamAbility",{
      params:{
        leagueId:this.leagueId,
        teamAbilityId:this.teamAbilityId
      }
    }).then(res=>{
      console.log(res.data)
      this.teamAbilitylist=res.data
      teamoption.yAxis.data=res.data.map(item=>item.team.teamName)
      if(this.teamAbilityId=="1" || this.teamAbilityId==""){
        teamoption.title.text="综合能力排行"
        teamoption.series[0].data=res.data.map(item=>item.capability)
      }else if(this.teamAbilityId=="2"){
        teamoption.title.text="进攻能力排行"
        teamoption.series[0].data=res.data.map(item=>item.attack)
      }else if(this.teamAbilityId=="3"){
        teamoption.title.text="防守能力排行"
        teamoption.series[0].data=res.data.map(item=>item.defense)
      }
      
      console.log(teamoption.yAxis.data)
      console.log("544354864642111111111111111111111")
      console.log(teamoption.yAxis.data.length)
      console.log(teamoption.series[0].data)
      this.$nextTick(() => {
        var chartName = echarts.init(this.$refs.chart);
        var dataZoom_end = 100;
        if (teamoption.yAxis.data.length > 15) {
            dataZoom_end = (15 / teamoption.yAxis.data.length) * 100
        } else {
            dataZoom_end = 100
        }
        chartName.dispatchAction({
          type: 'dataZoom',
          // 可视区域内展示10个(优先级高于上面的dataZoom_end )
          startValue: teamoption.yAxis.data.length > 4 ? teamoption.yAxis.data.length - 10 : 0,
          endValue: teamoption.yAxis.data.length > 1 ? teamoption.yAxis.data.length - 1 : 0
        })
        // res.data.length柱状图的条数，即数据长度。35为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
        this.autoHeight = res.data.length * 20 + 20; 
        chartName.resize({height:this.autoHeight}); 
        chartName.setOption(teamoption)
      })
    })
    },
    //球队排行清空
    resetteamRank(){
      this.leagueId=""
      this.leagueoptions=""
      this.teamAbilityId=""
      this.load()
    },

    //球员排行查询
    loadplayerRank(){
      const seriesLabel = {
      show: true
      };
      var playeroption = {
      title: {
        text: '球员能力排行'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      dataZoom: [
        {
            id: 'dataZoomY',
            type: 'slider',
            yAxisIndex: [0],
            filterMode: 'empty'
        }
      ],
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: []//球员名称
      },
      series: [
        {
          name: '参数',
          type: 'bar',//柱状图
          data: [],//各种能力值
          label: seriesLabel
        },
      ]
    };
      this.request.get("/rank/front/RankPlayerAbility",{
        params:{
          league1Id:this.league1Id,
          teamId:this.teamId,
          playerAbilityId:this.playerAbilityId
        }
      }).then(res=>{
        console.log(res.data)
        this.playerAbilitylist=res.data
        playeroption.yAxis.data=res.data.map(item=>item.player.playerName)
        if(this.playerAbilityId=="1" || this.playerAbilityId==""){
        playeroption.title.text="综合能力排行"
        playeroption.series[0].data=res.data.map(item=>item.capability)
        }else if(this.playerAbilityId=="2"){
          playeroption.title.text="进攻能力排行"
          playeroption.series[0].data=res.data.map(item=>item.attack)
        }else if(this.playerAbilityId=="3"){
          playeroption.title.text="防守能力排行"
          playeroption.series[0].data=res.data.map(item=>item.defense)
        }else if(this.playerAbilityId=="4"){
          playeroption.title.text="速度排行"
          playeroption.series[0].data=res.data.map(item=>item.speed)
        }else if(this.playerAbilityId=="5"){
          playeroption.title.text="力量排行"
          playeroption.series[0].data=res.data.map(item=>item.power)
        }else if(this.playerAbilityId=="6"){
          playeroption.title.text="射门排行"
          playeroption.series[0].data=res.data.map(item=>item.shoot)
        }else if(this.playerAbilityId=="7"){
          playeroption.title.text="传球排行"
          playeroption.series[0].data=res.data.map(item=>item.pass)
        }else if(this.playerAbilityId=="8"){
          playeroption.title.text="盘带排行"
          playeroption.series[0].data=res.data.map(item=>item.dribble)
        }else if(this.playerAbilityId=="9"){
          playeroption.title.text="技巧排行"
          playeroption.series[0].data=res.data.map(item=>item.technique)
        }else if(this.playerAbilityId=="10"){
          playeroption.title.text="任意球排行"
          playeroption.series[0].data=res.data.map(item=>item.freekick)
        }else if(this.playerAbilityId=="11"){
          playeroption.title.text="体能排行"
          playeroption.series[0].data=res.data.map(item=>item.stamina)
        }else if(this.playerAbilityId=="12"){
          playeroption.title.text="头球排行"
          playeroption.series[0].data=res.data.map(item=>item.header)
        }else if(this.playerAbilityId=="13"){
          playeroption.title.text="弹跳排行"
          playeroption.series[0].data=res.data.map(item=>item.jump)
        }else if(this.playerAbilityId=="14"){
          playeroption.title.text="守门能力排行"
          playeroption.series[0].data=res.data.map(item=>item.keeper)
        }else if(this.playerAbilityId=="15"){
          playeroption.title.text="团队合作排行"
          playeroption.series[0].data=res.data.map(item=>item.teamwork)
        }else if(this.playerAbilityId=="16"){
          playeroption.title.text="身价排行"
          playeroption.series[0].data=res.data.map(item=>item.player.playerValue)
        }
      
      console.log(playeroption.yAxis.data)
      console.log(playeroption.series[0].data)
      this.$nextTick(() => {
        var chartName = echarts.init(this.$refs.chart1);
        // res.data.length柱状图的条数，即数据长度。35为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
        this.autoHeight = res.data.length * 35 + 50; 
        chartName.resize({height:this.autoHeight}); 
        chartName.setOption(playeroption)
      })
      })
    },
    //球员排行清空
    resetplayerRank(){
      this.league1Id=""
      this.league1options=""
      this.teamId=""
      this.teamoptions=""
      this.playerAbilityId=""
      this.load()
    },


    //球队比较
    async compareteam(){
      var xData = ['场次','胜场','平场','负场','进球', '失球','控球率','射门', '射正', '过人','越位','犯规','黄牌','红牌']
      var xDatap = ['传球','成功传球']
      var timeLineData = [1];
      let textColor = "#fff";
      let lineColor="rgba(255,255,255,0.2)";
      let colors = [{
          borderColor: "rgba(2, 191, 232,1)",
          start: "rgba(2, 191, 232,0.8)",
          end: "rgba(2, 191, 232,0.1)"
        },
        {
          borderColor: "rgba(1, 231, 152,1)",
          start: "rgba(1, 231, 152,0.1)",
          end: "rgba(1, 231, 152,0.8)"
        },
      ];
      const seriesLabel = {
      show: true
      };
          // 指定图表的配置项和数据
    var option = {
        title:{
          text:'技术统计'
        },
        baseOption: {
          // backgroundColor: background,
          timeline: {
            show: false,
            top: 0,
            data: []
          },
          grid: [
            {
              show: false,
              left: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            },
            {
              show: false,
              left: '50%',
              top: '0%',
              bottom: '18%',
              width: '0%'
            },
            {
              show: false,
              right: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            }
          ],
          xAxis: [
            {
              //max:100,
              type: 'value',
              inverse: true, // 强制设置坐标轴分割间隔
              axisLine: { // 坐标轴轴线相关设置
                show: false, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 15,
                fontFamily: "DINPro-Regular"
              },
              splitLine:{
                show: false
              },
            },
            {
              gridIndex: 1,
              
            },
            {
              //max:100,
              gridIndex: 2,
              axisLine: {
                show: true, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: 'rgba(1, 231, 152, 0.3)'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 15,
                fontFamily: "DINPro-Regular"
              },
              splitLine: {
                show: false
              },
            }
          ],
          yAxis: [
            {
              nameTextStyle:{
                lineHeight: 56,
              },
              type: 'category',
              inverse: true,
              position: 'right',
              axisLine: {
                show: false,
                lineStyle:{
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                interval:0
              },
              
              data: xData
            },
            {
              //barGap:'50%',
              //boundCategoryGap: '50%',
              boundaryGap:false,
              // min:0,
              // max:15,
              nameTextStyle:{
                lineHeight: 56,
                
              },
              gridIndex: 1,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false,
                interval:0
              },
              axisLabel: { 
                show: true,
                padding:[20,0,0,0],
                width:10,
                textStyle: {
                  color: '#c1cbcc',
                  fontSize: 18,
                  fontFamily: "pmzd_title",
                  lineHeight:30,
                  height:30,
                },
                align: "center",
                interval:0
              },
              //中间的xdata
              data: xData.map(function(value) {
                return {
                  value: value,
                  textStyle: {
                    align: 'center',
                    verticalAlign:'top',
                    borderWidth:10,
                    borderType:'dashed',
                    padding:[5,0,0,0],
                    width:100
                  }
                }
              })
            },
            {
              nameTextStyle:{
                lineHeight: 56,
              },
              gridIndex: 2,
              type: 'category',
              inverse: true,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              data: xData
            }
          ],
          series: []
        },
        options: []
      }

      option.baseOption.timeline.data.push(timeLineData[0])
      option.options.push({
      series: [
      {
          barGap:'50%',
          barCategoryGap: '0%',
          name: "球队1",
          type: "bar",
          label:seriesLabel,
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'left', //在上方显示
                textStyle: { //数值样式
                  color: colors[0].borderColor,
                  fontSize: 15
                }
              },
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].start
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].borderColor
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderWidth: 1
            }
          },
          data: [],
          animationEasing: "elasticOut"
        },
        {
          barGap:'50%',
          barCategoryGap: '0%',
            name: "球队2",
            type: "bar",
            // stack: "2",
            // barWidth: 25,
            label:seriesLabel,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: colors[1].borderColor,
                    fontSize: 15
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].end
                  }
                ]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].borderColor
                  }
                ]),
                borderWidth: 1
              }
            },
            data: [],
            animationEasing: "elasticOut"
        }
      ]
    });


    var optionp = {
        title:{
          text:'传球统计'
        },
        baseOption: {
          // backgroundColor: background,
          timeline: {
            show: false,
            top: 0,
            data: []
          },
          grid: [
            {
              show: false,
              left: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            },
            {
              show: false,
              left: '50%',
              top: '0%',
              bottom: '18%',
              width: '0%'
            },
            {
              show: false,
              right: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            }
          ],
          xAxis: [
            {
              type: 'value',
              inverse: true, // 强制设置坐标轴分割间隔
              axisLine: { // 坐标轴轴线相关设置
                show: false, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 15,
                fontFamily: "DINPro-Regular"
              },
              splitLine:{
                show: false
              },
            },
            {
              gridIndex: 1,
              
            },
            {
              gridIndex: 2,
              axisLine: {
                show: true, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: 'rgba(1, 231, 152, 0.3)'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 12,
                fontFamily: "DINPro-Regular"
              },
              splitLine: {
                show: false
              },
            }
          ],
          yAxis: [
            {
              nameTextStyle:{
                lineHeight: 56,
              },
              type: 'category',
              inverse: true,
              position: 'right',
              axisLine: {
                show: false,
                lineStyle:{
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                interval:0
              },
              
              data: xDatap
            },
            {
              //barGap:'50%',
              //boundCategoryGap: '50%',
              //boundaryGap:false,
              // min:0,
              // max:15,
              nameTextStyle:{
                lineHeight: 56,
                
              },
              gridIndex: 1,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false,
                interval:0
              },
              axisLabel: { 
                show: true,
                padding:[0,0,0,0],
                width:10,
                textStyle: {
                  color: '#c1cbcc',
                  fontSize: 18,
                  fontFamily: "pmzd_title",
                  lineHeight:30,
                  height:30,
                },
                align: "center",
                interval:0
              },
              //中间的xdata
              data: xDatap.map(function(value) {
                return {
                  value: value,
                  textStyle: {
                    align: 'center',
                    verticalAlign:'top',
                    borderWidth:10,
                    borderType:'dashed',
                    padding:[0,0,0,0],
                    width:100
                  }
                }
              })
            },
            {
              nameTextStyle:{
                lineHeight: 56,
              },
              gridIndex: 2,
              type: 'category',
              inverse: true,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              data: xDatap
            }
          ],
          series: []
        },
        options: []
      }

      optionp.baseOption.timeline.data.push(timeLineData[0])
      optionp.options.push({
      series: [
      {
          barGap:'50%',
          barCategoryGap: '0%',
          name: "球队1",
          type: "bar",
          label:seriesLabel,
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'left', //在上方显示
                textStyle: { //数值样式
                  color: colors[0].borderColor,
                  fontSize: 15
                }
              },
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].start
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].borderColor
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderWidth: 1
            }
          },
          data: [],
          animationEasing: "elasticOut"
        },
        {
            barGap:'50%',
            barCategoryGap: '0%',
            name: "球队2",
            type: "bar",
            // stack: "2",
            // barWidth: 25,
            label:seriesLabel,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: colors[1].borderColor,
                    fontSize: 15
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].end
                  }
                ]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].borderColor
                  }
                ]),
                borderWidth: 1
              }
            },
            data: [],
            animationEasing: "elasticOut"
        }
      ]
    });

   await this.request.get("/echarts/front/compareteam",{
        params:{
          leagueId:this.league2Id,
          teamId:this.team1Id,
          homeAway:this.homeAway
        }
      }).then(res=>{
        console.log(res.teamdatamap)
        this.team1Data=res.teamdatamap.parameter
        this.team1attackData=res.teamattackdatamap.parameter
        this.team1passData=res.teampassdatamap.parameter
        
        console.log(this.team1Data)

        this.team1info=res.teamData
        console.log(this.team1info)
        
      }),
     await this.request.get("/echarts/front/compareteam",{
        params:{
          leagueId:this.league2Id,
          teamId:this.team2Id,
          homeAway:this.homeAway
        }
      }).then(res=>{
        console.log(res.teamdatamap)
        this.team2Data=res.teamdatamap.parameter
        this.team2attackData=res.teamattackdatamap.parameter
        this.team2passData=res.teampassdatamap.parameter
        console.log(this.team2Data)
        this.team2info=res.teamData
        console.log(this.team2info)
    });

    option.options[0].series[0].data = this.team1attackData
    option.options[0].series[1].data = this.team2attackData
      
    optionp.options[0].series[0].data = this.team1passData
    optionp.options[0].series[1].data = this.team2passData
    
    console.log(option)
    console.log("=========================")


      this.$nextTick(()=>{
      // 基于准备好的dom，初始化echarts实例
      var myLineChart = echarts.init(
        this.$refs.chart2
      );
       //team1Data.length柱状图的条数，即数据长度。25为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
      this.autoHeight = this.team1attackData.length * 18 + 20; 
      myLineChart.resize({height:this.autoHeight}); 
      myLineChart.setOption(option);

       // 基于准备好的dom，初始化echarts实例
       var myLineChart1 = echarts.init(
        this.$refs.chart2p
      );
       //team1Data.length柱状图的条数，即数据长度。25为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
      this.autoHeight = this.team1attackData.length * 5 + 10; 
      myLineChart1.resize({height:this.autoHeight}); 
      myLineChart1.setOption(optionp);


      })
    },

    //清空球队比较条件
    resetcompareteam(){
      this.homeAway=""
      this.league2Id=""
      this.league2options=""
      this.team1Id=""
      this.team1options=""
      this.team2Id=""
      this.team2options=""
    },



    //球员比较
   async compareplayer(){
    var xData = ['出场次数','进球', '助攻','射门', '射正','尝试过人','成功过人','抢断','越位','犯规','被犯规','黄牌','红牌']
    var xDatap = ['传球','成功传球']
    var timeLineData = [1];
    let textColor = "#fff";
    let lineColor="rgba(255,255,255,0.2)";
    let colors = [{
        borderColor: "rgba(2, 191, 232,1)",
        start: "rgba(2, 191, 232,0.8)",
        end: "rgba(2, 191, 232,0.1)"
      },
      {
        borderColor: "rgba(1, 231, 152,1)",
        start: "rgba(1, 231, 152,0.1)",
        end: "rgba(1, 231, 152,0.8)"
      },
    ];
    const seriesLabel = {
    show: true
    };
    // 指定图表的配置项和数据
    var option1 = {
      title:{
        text:'技术统计'
      },
      baseOption: {
        // backgroundColor: background,
        timeline: {
          show: false,
          top: 0,
          data: []
        },
        grid: [
          {
            show: false,
            left: '12%',
            top: '0%',
            bottom: '0%',
            containLabel: true,
            width: '28%'
          },
          {
            show: false,
            left: '50%',
            top: '0%',
            bottom: '18%',
            width: '0%'
          },
          {
            show: false,
            right: '12%',
            top: '0%',
            bottom: '0%',
            containLabel: true,
            width: '28%'
          }
        ],
        xAxis: [
          {
            //max:100,
            type: 'value',
            inverse: true, // 强制设置坐标轴分割间隔
            axisLine: { // 坐标轴轴线相关设置
              show: false, // 是否显示坐标轴轴线
              onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
              lineStyle: {
                color: '#00A5CA45'
              }
            },
            axisTick: {
              show: true
            },
            position: 'bottom',
            axisLabel: {
              show: true,
              color: '#c6d3d7',
              fontSize: 15,
              fontFamily: "DINPro-Regular"
            },
            splitLine:{
              show: false
            },
          },
          {
            gridIndex: 1,
            
          },
          {
            //max:100,
            gridIndex: 2,
            axisLine: {
              show: true, // 是否显示坐标轴轴线
              onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
              lineStyle: {
                color: 'rgba(1, 231, 152, 0.3)'
              }
            },
            axisTick: {
              show: true
            },
            position: 'bottom',
            axisLabel: {
              show: true,
              color: '#c6d3d7',
              fontSize: 15,
              fontFamily: "DINPro-Regular"
            },
            splitLine: {
              show: false
            },
          }
        ],
        yAxis: [
          {
            // nameTextStyle:{
            //   lineHeight: 56,
            // },
            type: 'category',
            inverse: true,
            position: 'right',
            axisLine: {
              show: false,
              lineStyle:{
                color: '#00A5CA45'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            
            data: xData
          },
          {
            boundaryGap:false,
              barWidth:100,
            nameTextStyle:{
              lineHeight: 56,
              
            },
            gridIndex: 1,
            type: 'category',
            inverse: true,
            position: 'left',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: { 
              show: true,
              padding:[0,0,0,0],
              width:10,
              textStyle: {
                
                color: '#c1cbcc',
                fontSize: 18,
                fontFamily: "pmzd_title"
                
              },
              align: "center",
              interval:0
            },
            //中间的xdata
            data: xData.map(function(value) {
              return {
                value: value,
                textStyle: {
                  lineHeight:0,
                  align: 'center',
                  verticalAlign:'top',
                  padding:[15,0,0,0],
                  borderWidth:10,
                  borderType:'dashed',
                  width:100
                }
              }
            })
          },
          {
            nameTextStyle:{
              lineHeight: 56,
            },
            gridIndex: 2,
            type: 'category',
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data: xData
          }
        ],
        series: []
      },
      options: []
    }

option1.baseOption.timeline.data.push(timeLineData[0])
option1.options.push({
series: [
{
    barGap:'50%',
    barCategoryGap: '0%',
    name: "球员1",
    type: "bar",
    label:seriesLabel,
    itemStyle: {
      normal: {
        label: {
          show: true, //开启显示
          position: 'left', //在上方显示
          textStyle: { //数值样式
            color: colors[0].borderColor,
            fontSize: 15
          }
        },
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: colors[0].start
          },
          {
            offset: 1,
            color: colors[0].end
          }
        ]),
        borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: colors[0].borderColor
          },
          {
            offset: 1,
            color: colors[0].end
          }
        ]),
        borderWidth: 1
      }
    },
    data: [],
    animationEasing: "elasticOut"
  },
  {

      barGap:'50%',
      barCategoryGap: '0%',
      name: "球员2",
      type: "bar",
      // stack: "2",
      // barWidth: 25,
      label:seriesLabel,
      xAxisIndex: 2,
      yAxisIndex: 2,
      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示
            position: 'right', //在上方显示
            textStyle: { //数值样式
              color: colors[1].borderColor,
              fontSize: 15
            }
          },
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: colors[1].start
            },
            {
              offset: 1,
              color: colors[1].end
            }
          ]),
          borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: colors[1].start
            },
            {
              offset: 1,
              color: colors[1].borderColor
            }
          ]),
          borderWidth: 1
        }
      },
      data: [],
      animationEasing: "elasticOut"
  }
]
});


var optionp = {
        title:{
          text:'传球统计'
        },
        baseOption: {
          // backgroundColor: background,
          timeline: {
            show: false,
            top: 0,
            data: []
          },
          grid: [
            {
              show: false,
              left: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            },
            {
              show: false,
              left: '50%',
              top: '0%',
              bottom: '18%',
              width: '0%'
            },
            {
              show: false,
              right: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            }
          ],
          xAxis: [
            {
              type: 'value',
              inverse: true, // 强制设置坐标轴分割间隔
              axisLine: { // 坐标轴轴线相关设置
                show: false, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 15,
                fontFamily: "DINPro-Regular"
              },
              splitLine:{
                show: false
              },
            },
            {
              gridIndex: 1,
              
            },
            {
              gridIndex: 2,
              axisLine: {
                show: true, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: 'rgba(1, 231, 152, 0.3)'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 12,
                fontFamily: "DINPro-Regular"
              },
              splitLine: {
                show: false
              },
            }
          ],
          yAxis: [
            {
              nameTextStyle:{
                lineHeight: 56,
              },
              type: 'category',
              inverse: true,
              position: 'right',
              axisLine: {
                show: false,
                lineStyle:{
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                interval:0
              },
              
              data: xDatap
            },
            {
              //barGap:'50%',
              //boundCategoryGap: '50%',
              //boundaryGap:false,
              // min:0,
              // max:15,
              nameTextStyle:{
                lineHeight: 56,
                
              },
              gridIndex: 1,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false,
                interval:0
              },
              axisLabel: { 
                show: true,
                padding:[0,0,0,0],
                width:10,
                textStyle: {
                  color: '#c1cbcc',
                  fontSize: 18,
                  fontFamily: "pmzd_title",
                  lineHeight:30,
                  height:30,
                },
                align: "center",
                interval:0
              },
              //中间的xdata
              data: xDatap.map(function(value) {
                return {
                  value: value,
                  textStyle: {
                    align: 'center',
                    verticalAlign:'top',
                    borderWidth:10,
                    borderType:'dashed',
                    padding:[0,0,0,0],
                    width:100
                  }
                }
              })
            },
            {
              nameTextStyle:{
                lineHeight: 56,
              },
              gridIndex: 2,
              type: 'category',
              inverse: true,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              data: xDatap
            }
          ],
          series: []
        },
        options: []
      }

      optionp.baseOption.timeline.data.push(timeLineData[0])
      optionp.options.push({
      series: [
      {
          barGap:'50%',
          barCategoryGap: '0%',
          name: "球员1",
          type: "bar",
          label:seriesLabel,
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'left', //在上方显示
                textStyle: { //数值样式
                  color: colors[0].borderColor,
                  fontSize: 15
                }
              },
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].start
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].borderColor
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderWidth: 1
            }
          },
          data: [],
          animationEasing: "elasticOut"
        },
        {
            barGap:'50%',
            barCategoryGap: '0%',
            name: "球员2",
            type: "bar",
            // stack: "2",
            // barWidth: 25,
            label:seriesLabel,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: colors[1].borderColor,
                    fontSize: 15
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].end
                  }
                ]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].borderColor
                  }
                ]),
                borderWidth: 1
              }
            },
            data: [],
            animationEasing: "elasticOut"
        }
      ]
    });

    
     await this.request.get("/echarts/front/compareplayer",{
        params:{
          leagueId:this.league3Id,
          playerId:this.player1Id
        }
      }).then(res=>{
          console.log(res.playerdatamap)
          this.player1Data=res.playerdatamap.parameter
          this.player1attackData=res.playerattackdatamap.parameter
          this.player1passData=res.playerpassdatamap.parameter
          console.log(this.player1Data)
          this.player1info=res.playerData
          console.log(this.player1info)
      }),
    await this.request.get("/echarts/front/compareplayer",{
        params:{
          leagueId:this.league3Id,
          playerId:this.player2Id
        }
      }).then(res=>{
          console.log(res.playerdatamap)
          this.player2Data=res.playerdatamap.parameter
          this.player2attackData=res.playerattackdatamap.parameter
          this.player2passData=res.playerpassdatamap.parameter
          console.log(this.player2Data)
          this.player2info=res.playerData
          console.log(this.player2info)
      }),

    option1.options[0].series[0].data = this.player1attackData
    option1.options[0].series[1].data = this.player2attackData
      
    optionp.options[0].series[0].data = this.player1passData
    optionp.options[0].series[1].data = this.player2passData
      
    console.log(option1)
    console.log("=========================")


      this.$nextTick(()=>{
      // 基于准备好的dom，初始化echarts实例
      var myLineChart1 = echarts.init(
        this.$refs.chart3
      );
       //team1Data.length柱状图的条数，即数据长度。25为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
       this.autoHeight = this.player1attackData.length * 18 + 10; 
      myLineChart1.resize({height:this.autoHeight}); 
      myLineChart1.setOption(option1);

       // 基于准备好的dom，初始化echarts实例
       var myLineChart1 = echarts.init(
        this.$refs.chart3p
      );
       //team1Data.length柱状图的条数，即数据长度。25为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
      this.autoHeight = this.player1attackData.length * 5 + 10; 
      myLineChart1.resize({height:this.autoHeight}); 
      myLineChart1.setOption(optionp);

      })
    },
 
    //清空球员比较条件
    resetcompareplayer(){
      this.league3Id=""
      this.league3options=""
      this.team3Id=""
      this.team3options=""
      this.team4Id=""
      this.team4options=""
      this.player1Id=""
      this.player1options=""
      this.player2Id=""
      this.player2options=""
    },

    //球队场均数据比较
    async compareaverageteam(){
      var xData = ['场均进球', '场均失球','场均控球率','场均射门', '场均射正','场均过人','场均越位','场均犯规','场均黄牌','场均红牌']
      var xDatap = ['场均传球','场均成功传球']
      var timeLineData = [1];
      let textColor = "#fff";
      let lineColor="rgba(255,255,255,0.2)";
      let colors = [{
          borderColor: "rgba(2, 191, 232,1)",
          start: "rgba(2, 191, 232,0.8)",
          end: "rgba(2, 191, 232,0.1)"
        },
        {
          borderColor: "rgba(1, 231, 152,1)",
          start: "rgba(1, 231, 152,0.1)",
          end: "rgba(1, 231, 152,0.8)"
        },
      ];
      const seriesLabel = {
      show: true
      };
         // 指定图表的配置项和数据
         var option = {
        title:{
          text:'技术统计'
        },
        baseOption: {
          // backgroundColor: background,
          timeline: {
            show: false,
            top: 0,
            data: []
          },
          grid: [
            {
              show: false,
              left: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            },
            {
              show: false,
              left: '50%',
              top: '0%',
              bottom: '18%',
              width: '0%'
            },
            {
              show: false,
              right: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            }
          ],
          xAxis: [
            {
              max:100,
              type: 'value',
              inverse: true, // 强制设置坐标轴分割间隔
              axisLine: { // 坐标轴轴线相关设置
                show: false, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 15,
                fontFamily: "DINPro-Regular"
              },
              splitLine:{
                show: false
              },
            },
            {
              gridIndex: 1,
              
            },
            {
              max:100,
              gridIndex: 2,
              axisLine: {
                show: true, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: 'rgba(1, 231, 152, 0.3)'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 15,
                fontFamily: "DINPro-Regular"
              },
              splitLine: {
                show: false
              },
            }
          ],
          yAxis: [
            {
              nameTextStyle:{
                lineHeight: 56,
              },
              type: 'category',
              inverse: true,
              position: 'right',
              axisLine: {
                show: false,
                lineStyle:{
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                interval:0
              },
              
              data: xData
            },
            {
              //barGap:'50%',
              //boundCategoryGap: '50%',
              boundaryGap:false,
              // min:0,
              // max:15,
              nameTextStyle:{
                lineHeight: 56,
                
              },
              gridIndex: 1,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false,
                interval:0
              },
              axisLabel: { 
                show: true,
                padding:[20,0,0,0],
                width:10,
                textStyle: {
                  color: '#c1cbcc',
                  fontSize: 18,
                  fontFamily: "pmzd_title",
                  lineHeight:30,
                  height:30,
                },
                align: "center",
                interval:0
              },
              //中间的xdata
              data: xData.map(function(value) {
                return {
                  value: value,
                  textStyle: {
                    align: 'center',
                    verticalAlign:'top',
                    borderWidth:10,
                    borderType:'dashed',
                    padding:[0,0,0,0],
                    width:100
                  }
                }
              })
            },
            {
              nameTextStyle:{
                lineHeight: 56,
              },
              gridIndex: 2,
              type: 'category',
              inverse: true,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              data: xData
            }
          ],
          series: []
        },
        options: []
      }

      option.baseOption.timeline.data.push(timeLineData[0])
      option.options.push({
      series: [
      {
          barGap:'50%',
          barCategoryGap: '0%',
          name: "球队1",
          type: "bar",
          label:seriesLabel,
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'left', //在上方显示
                textStyle: { //数值样式
                  color: colors[0].borderColor,
                  fontSize: 15
                }
              },
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].start
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].borderColor
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderWidth: 1
            }
          },
          data: [],
          animationEasing: "elasticOut"
        },
        {
          barGap:'50%',
          barCategoryGap: '0%',
            name: "球队2",
            type: "bar",
            // stack: "2",
            // barWidth: 25,
            label:seriesLabel,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: colors[1].borderColor,
                    fontSize: 15
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].end
                  }
                ]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].borderColor
                  }
                ]),
                borderWidth: 1
              }
            },
            data: [],
            animationEasing: "elasticOut"
        }
      ]
    });


    var optionp = {
        title:{
          text:'传球统计'
        },
        baseOption: {
          // backgroundColor: background,
          timeline: {
            show: false,
            top: 0,
            data: []
          },
          grid: [
            {
              show: false,
              left: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            },
            {
              show: false,
              left: '50%',
              top: '0%',
              bottom: '18%',
              width: '0%'
            },
            {
              show: false,
              right: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            }
          ],
          xAxis: [
            {
              //max:700,
              type: 'value',
              inverse: true, // 强制设置坐标轴分割间隔
              axisLine: { // 坐标轴轴线相关设置
                show: false, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 15,
                fontFamily: "DINPro-Regular"
              },
              splitLine:{
                show: false
              },
            },
            {
              gridIndex: 1,
              
            },
            {
              //max:700,
              gridIndex: 2,
              axisLine: {
                show: true, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: 'rgba(1, 231, 152, 0.3)'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 12,
                fontFamily: "DINPro-Regular"
              },
              splitLine: {
                show: false
              },
            }
          ],
          yAxis: [
            {
              nameTextStyle:{
                lineHeight: 56,
              },
              type: 'category',
              inverse: true,
              position: 'right',
              axisLine: {
                show: false,
                lineStyle:{
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                interval:0
              },
              
              data: xDatap
            },
            {
              //barGap:'50%',
              //boundCategoryGap: '50%',
              //boundaryGap:false,
              // min:0,
              // max:15,
              nameTextStyle:{
                lineHeight: 56,
                
              },
              gridIndex: 1,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false,
                interval:0
              },
              axisLabel: { 
                show: true,
                padding:[0,0,0,0],
                width:10,
                textStyle: {
                  color: '#c1cbcc',
                  fontSize: 18,
                  fontFamily: "pmzd_title",
                  lineHeight:30,
                  height:30,
                },
                align: "center",
                interval:0
              },
              //中间的xdata
              data: xDatap.map(function(value) {
                return {
                  value: value,
                  textStyle: {
                    align: 'center',
                    verticalAlign:'top',
                    borderWidth:10,
                    borderType:'dashed',
                    padding:[0,0,0,0],
                    width:100
                  }
                }
              })
            },
            {
              nameTextStyle:{
                lineHeight: 56,
              },
              gridIndex: 2,
              type: 'category',
              inverse: true,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              data: xDatap
            }
          ],
          series: []
        },
        options: []
      }

      optionp.baseOption.timeline.data.push(timeLineData[0])
      optionp.options.push({
      series: [
      {
          barGap:'50%',
          barCategoryGap: '0%',
          name: "球队1",
          type: "bar",
          label:seriesLabel,
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'left', //在上方显示
                textStyle: { //数值样式
                  color: colors[0].borderColor,
                  fontSize: 15
                }
              },
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].start
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].borderColor
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderWidth: 1
            }
          },
          data: [],
          animationEasing: "elasticOut"
        },
        {
            barGap:'50%',
            barCategoryGap: '0%',
            name: "球队2",
            type: "bar",
            // stack: "2",
            // barWidth: 25,
            label:seriesLabel,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: colors[1].borderColor,
                    fontSize: 15
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].end
                  }
                ]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].borderColor
                  }
                ]),
                borderWidth: 1
              }
            },
            data: [],
            animationEasing: "elasticOut"
        }
      ]
    });


      await this.request.get("/echarts/front/compareteam",{
        params:{
          leagueId:this.league2Id,
          teamId:this.team1Id,
          homeAway:this.homeAway
        }
      }).then(res=>{
        console.log(res.teamavedatamap)
        this.team1aveData=res.teamavedatamap.aveparameter
        this.team1aveattackData=res.teamaveattackdatamap.aveparameter
        this.team1avepassData=res.teamavepassdatamap.aveparameter
        console.log(this.team1aveData)

        this.team1info=res.teamData
        console.log(this.team1info)
        
      }),
     await this.request.get("/echarts/front/compareteam",{
        params:{
          leagueId:this.league2Id,
          teamId:this.team2Id,
          homeAway:this.homeAway
        }
      }).then(res=>{
        console.log(res.teamavedatamap)
        this.team2aveData=res.teamavedatamap.aveparameter
        this.team2aveattackData=res.teamaveattackdatamap.aveparameter
        this.team2avepassData=res.teamavepassdatamap.aveparameter
        console.log(this.team2aveData)
        this.team2info=res.teamData
        console.log(this.team2info)
    });



    option.options[0].series[0].data = this.team1aveattackData
    option.options[0].series[1].data = this.team2aveattackData

    optionp.options[0].series[0].data = this.team1avepassData
    optionp.options[0].series[1].data = this.team2avepassData

    this.$nextTick(()=>{
      // 基于准备好的dom，初始化echarts实例
      var myLineChart = echarts.init(
        this.$refs.chart2
      );
       //team1Data.length柱状图的条数，即数据长度。25为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
      this.autoHeight = this.team1aveData.length * 18 + 10; 
      myLineChart.resize({height:this.autoHeight}); 
      myLineChart.setOption(option);

      // 基于准备好的dom，初始化echarts实例
      var myLineChart1 = echarts.init(
        this.$refs.chart2p
      );
       //team1Data.length柱状图的条数，即数据长度。25为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
      this.autoHeight = this.team1attackData.length * 5 + 10; 
      myLineChart1.resize({height:this.autoHeight}); 
      myLineChart1.setOption(optionp);
      })

    },

    //球员场均数据比较
    async compareaverageplayer(){
      var xData = ['场均进球', '场均助攻','场均射门', '场均射正', '场均尝试过人','场均成功过人','场均抢断','场均越位','场均犯规','场均被犯规','场均黄牌','场均红牌']
      var xDatap = ['场均传球','场均成功传球']
        var timeLineData = [1];
        let textColor = "#fff";
        let lineColor="rgba(255,255,255,0.2)";
        let colors = [{
            borderColor: "rgba(2, 191, 232,1)",
            start: "rgba(2, 191, 232,0.8)",
            end: "rgba(2, 191, 232,0.1)"
          },
          {
            borderColor: "rgba(1, 231, 152,1)",
            start: "rgba(1, 231, 152,0.1)",
            end: "rgba(1, 231, 152,0.8)"
          },
        ];
        const seriesLabel = {
        show: true
        };
        var option1 = {
      title:{
        text:'技术统计'
      },
      baseOption: {
        // backgroundColor: background,
        timeline: {
          show: false,
          top: 0,
          data: []
        },
        grid: [
          {
            show: false,
            left: '12%',
            top: '0%',
            bottom: '0%',
            containLabel: true,
            width: '28%'
          },
          {
            show: false,
            left: '50%',
            top: '0%',
            bottom: '18%',
            width: '0%'
          },
          {
            show: false,
            right: '12%',
            top: '0%',
            bottom: '0%',
            containLabel: true,
            width: '28%'
          }
        ],
        xAxis: [
          {
            max:20,
            type: 'value',
            inverse: true, // 强制设置坐标轴分割间隔
            axisLine: { // 坐标轴轴线相关设置
              show: false, // 是否显示坐标轴轴线
              onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
              lineStyle: {
                color: '#00A5CA45'
              }
            },
            axisTick: {
              show: true
            },
            position: 'bottom',
            axisLabel: {
              show: true,
              color: '#c6d3d7',
              fontSize: 15,
              fontFamily: "DINPro-Regular"
            },
            splitLine:{
              show: false
            },
          },
          {
            gridIndex: 1,
            
          },
          {
            max:20,
            gridIndex: 2,
            axisLine: {
              show: true, // 是否显示坐标轴轴线
              onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
              lineStyle: {
                color: 'rgba(1, 231, 152, 0.3)'
              }
            },
            axisTick: {
              show: true
            },
            position: 'bottom',
            axisLabel: {
              show: true,
              color: '#c6d3d7',
              fontSize: 15,
              fontFamily: "DINPro-Regular"
            },
            splitLine: {
              show: false
            },
          }
        ],
        yAxis: [
          {
            // nameTextStyle:{
            //   lineHeight: 56,
            // },
            type: 'category',
            inverse: true,
            position: 'right',
            axisLine: {
              show: false,
              lineStyle:{
                color: '#00A5CA45'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            
            data: xData
          },
          {
            boundaryGap:false,
              barWidth:100,
            nameTextStyle:{
              lineHeight: 56,
              
            },
            gridIndex: 1,
            type: 'category',
            inverse: true,
            position: 'left',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: { 
              show: true,
              padding:[0,0,0,0],
              width:10,
              textStyle: {
                
                color: '#c1cbcc',
                fontSize: 18,
                fontFamily: "pmzd_title"
                
              },
              align: "center",
              interval:0
            },
            //中间的xdata
            data: xData.map(function(value) {
              return {
                value: value,
                textStyle: {
                  lineHeight:0,
                  align: 'center',
                  verticalAlign:'top',
                  padding:[15,0,0,0],
                  borderWidth:10,
                  borderType:'dashed',
                  width:100
                }
              }
            })
          },
          {
            nameTextStyle:{
              lineHeight: 56,
            },
            gridIndex: 2,
            type: 'category',
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data: xData
          }
        ],
        series: []
      },
      options: []
    }

        option1.baseOption.timeline.data.push(timeLineData[0])
        option1.options.push({
series: [
{
    barGap:'50%',
    barCategoryGap: '0%',
    name: "球员1",
    type: "bar",
    label:seriesLabel,
    itemStyle: {
      normal: {
        label: {
          show: true, //开启显示
          position: 'left', //在上方显示
          textStyle: { //数值样式
            color: colors[0].borderColor,
            fontSize: 15
          }
        },
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: colors[0].start
          },
          {
            offset: 1,
            color: colors[0].end
          }
        ]),
        borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: colors[0].borderColor
          },
          {
            offset: 1,
            color: colors[0].end
          }
        ]),
        borderWidth: 1
      }
    },
    data: [],
    animationEasing: "elasticOut"
  },
  {

      barGap:'50%',
      barCategoryGap: '0%',
      name: "球员2",
      type: "bar",
      // stack: "2",
      // barWidth: 25,
      label:seriesLabel,
      xAxisIndex: 2,
      yAxisIndex: 2,
      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示
            position: 'right', //在上方显示
            textStyle: { //数值样式
              color: colors[1].borderColor,
              fontSize: 15
            }
          },
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: colors[1].start
            },
            {
              offset: 1,
              color: colors[1].end
            }
          ]),
          borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: colors[1].start
            },
            {
              offset: 1,
              color: colors[1].borderColor
            }
          ]),
          borderWidth: 1
        }
      },
      data: [],
      animationEasing: "elasticOut"
  }
]
});



var optionp = {
        title:{
          text:'传球统计'
        },
        baseOption: {
          // backgroundColor: background,
          timeline: {
            show: false,
            top: 0,
            data: []
          },
          grid: [
            {
              show: false,
              left: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            },
            {
              show: false,
              left: '50%',
              top: '0%',
              bottom: '18%',
              width: '0%'
            },
            {
              show: false,
              right: '12%',
              top: '0%',
              bottom: '0%',
              containLabel: true,
              width: '28%'
            }
          ],
          xAxis: [
            {
              //max:100,
              type: 'value',
              inverse: true, // 强制设置坐标轴分割间隔
              axisLine: { // 坐标轴轴线相关设置
                show: false, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 15,
                fontFamily: "DINPro-Regular"
              },
              splitLine:{
                show: false
              },
            },
            {
              gridIndex: 1,
              
            },
            {
              //max:100,
              gridIndex: 2,
              axisLine: {
                show: true, // 是否显示坐标轴轴线
                onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                lineStyle: {
                  color: 'rgba(1, 231, 152, 0.3)'
                }
              },
              axisTick: {
                show: true
              },
              position: 'bottom',
              axisLabel: {
                show: true,
                color: '#c6d3d7',
                fontSize: 12,
                fontFamily: "DINPro-Regular"
              },
              splitLine: {
                show: false
              },
            }
          ],
          yAxis: [
            {
              nameTextStyle:{
                lineHeight: 56,
              },
              type: 'category',
              inverse: true,
              position: 'right',
              axisLine: {
                show: false,
                lineStyle:{
                  color: '#00A5CA45'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                interval:0
              },
              
              data: xDatap
            },
            {
              //barGap:'50%',
              //boundCategoryGap: '50%',
              //boundaryGap:false,
              // min:0,
              // max:15,
              nameTextStyle:{
                lineHeight: 56,
                
              },
              gridIndex: 1,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false,
                interval:0
              },
              axisLabel: { 
                show: true,
                padding:[0,0,0,0],
                width:10,
                textStyle: {
                  color: '#c1cbcc',
                  fontSize: 18,
                  fontFamily: "pmzd_title",
                  lineHeight:30,
                  height:30,
                },
                align: "center",
                interval:0
              },
              //中间的xdata
              data: xDatap.map(function(value) {
                return {
                  value: value,
                  textStyle: {
                    align: 'center',
                    verticalAlign:'top',
                    borderWidth:10,
                    borderType:'dashed',
                    padding:[0,0,0,0],
                    width:100
                  }
                }
              })
            },
            {
              nameTextStyle:{
                lineHeight: 56,
              },
              gridIndex: 2,
              type: 'category',
              inverse: true,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              data: xDatap
            }
          ],
          series: []
        },
        options: []
      }

      optionp.baseOption.timeline.data.push(timeLineData[0])
      optionp.options.push({
      series: [
      {
          barGap:'50%',
          barCategoryGap: '0%',
          name: "球员1",
          type: "bar",
          label:seriesLabel,
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'left', //在上方显示
                textStyle: { //数值样式
                  color: colors[0].borderColor,
                  fontSize: 15
                }
              },
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].start
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: colors[0].borderColor
                },
                {
                  offset: 1,
                  color: colors[0].end
                }
              ]),
              borderWidth: 1
            }
          },
          data: [],
          animationEasing: "elasticOut"
        },
        {
            barGap:'50%',
            barCategoryGap: '0%',
            name: "球员2",
            type: "bar",
            // stack: "2",
            // barWidth: 25,
            label:seriesLabel,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: colors[1].borderColor,
                    fontSize: 15
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].end
                  }
                ]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colors[1].start
                  },
                  {
                    offset: 1,
                    color: colors[1].borderColor
                  }
                ]),
                borderWidth: 1
              }
            },
            data: [],
            animationEasing: "elasticOut"
        }
      ]
    });

    await this.request.get("/echarts/front/compareplayer",{
        params:{
          leagueId:this.league3Id,
          playerId:this.player1Id
        }
      }).then(res=>{
          console.log(res.playeravedatamap)
          this.player1aveData=res.playeravedatamap.aveparameter
          this.player1aveattackData=res.playeraveattackdatamap.aveparameter
          this.player1avepassData=res.playeravepassdatamap.aveparameter
          console.log(this.player1aveData)
          this.player1info=res.playerData
          console.log(this.player1info)
      }),
    await this.request.get("/echarts/front/compareplayer",{
        params:{
          leagueId:this.league3Id,
          playerId:this.player2Id
        }
      }).then(res=>{
          console.log(res.playeravedatamap)
          this.player2aveData=res.playeravedatamap.aveparameter
          this.player2aveattackData=res.playeraveattackdatamap.aveparameter
          this.player2avepassData=res.playeravepassdatamap.aveparameter
          console.log(this.player2aveData)
          this.player2info=res.playerData
          console.log(this.player2info)
      });


    option1.options[0].series[0].data = this.player1aveattackData
    option1.options[0].series[1].data = this.player2aveattackData

    optionp.options[0].series[0].data = this.player1avepassData
    optionp.options[0].series[1].data = this.player2avepassData

    this.$nextTick(()=>{
      // 基于准备好的dom，初始化echarts实例
      var myLineChart1 = echarts.init(
        this.$refs.chart3
      );
       //team1Data.length柱状图的条数，即数据长度。25为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
       this.autoHeight = this.player1aveattackData.length * 18 + 10; 
      myLineChart1.resize({height:this.autoHeight}); 
      myLineChart1.setOption(option1);

      // 基于准备好的dom，初始化echarts实例
      var myLineChart1 = echarts.init(
        this.$refs.chart3p
      );
       //team1Data.length柱状图的条数，即数据长度。25为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
      this.autoHeight = this.player1aveattackData.length * 5 + 10; 
      myLineChart1.resize({height:this.autoHeight}); 
      myLineChart1.setOption(optionp);


      })

    },
    //球队路由跳转
    TeamDetail(id) {
       this.$router.push({
          path: '/front/teamdetail',
          query: {
            id: id
          }
        })
    },
    //球员路由跳转
    PlayerDetail(id) {
       this.$router.push({
          path: '/front/playerdetail',
          query: {
            id: id
          }
        })
    },

  }
}
</script>

<style>
#saizhi {
  border: 1px solid #e5e5e5;
  margin-top: 8px;
  clear: both;
}
.htitle {
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  background-color: #f0f0f0;
  position: relative;
}
#exhibitor1{ 
  margin:0 auto;
  width:50%;
} 
#exhibitor2{ 
  margin:0 auto;
  width:50%;
} 

#exhibitor118{ 
  margin:0 auto;
  width:100%;
} 

#exhibitor117{ 
  margin:0 auto;
  width:100%;
} 
#exhibitor115{ 
  margin-top: 120px;
  width:100%;

} 
#exhibitor115p{ 
  width:100%;
} 
#exhibitor116{ 
  margin-top: 120px;
  width:100%;

} 
#exhibitor116p{ 
  width:100%;

} 
#exhibitor117left{ 
  float:left;
  width:50%; 
  height:100%; 
  background:#eeeeee;
  border: 1px solid #e5e5e5;
} 
#exhibitor117right{ 
  float:right; 
  width:50%;
  height:100%;
  border: 1px solid #e5e5e5;
}
#exhibitor118left{ 
  float:left;
  width:50%; 
  height:100%; 
  background:#eeeeee;
  border: 1px solid #e5e5e5;
} 
#exhibitor118right{ 
  float:right; 
  width:50%;
  height:100%;
  border: 1px solid #e5e5e5;
}
#exhibitor1left{ 
  float:left;
  width:50%; 
  height:100%; 
  background:#eeeeee;
  border: 1px solid #e5e5e5;
} 
#exhibitor1right{ 
  float:right; 
  width:50%;
  height:100%;
  border: 1px solid #e5e5e5;
}  
#exhibitor2left{ 
  float:left;
  width:50%; 
  height:100%; 
  background:#eeeeee;
  border: 1px solid #e5e5e5;
} 
#exhibitor2right{ 
  float:right; 
  width:50%;
  height:100%;
  border: 1px solid #e5e5e5;
} 
.testA{
  color: #005eb8;
}
.testA:hover{
  cursor: pointer;
}
</style>